<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:pm="http://primefaces.org/mobile">
    
    <f:view renderKitId="PRIMEFACES_MOBILE" />
    
    <h:head>
         <link type="text/css" rel="stylesheet" href="#{request.contextPath}/javax.faces.resource/rating/rating.css.jsf?ln=primefaces" />
        <script type="text/javascript" src="#{request.contextPath}/javax.faces.resource/rating/rating.js.jsf?ln=primefaces" />
		<link rel="stylesheet"
				href="#{request.contextPath}/resources/css/bootstrap.css"/>
		<link rel="stylesheet"
				href="#{request.contextPath}/resources/css/hotellie.css"/>
		<link rel="stylesheet"
				href="#{request.contextPath}/resources/css/font-awesome.css"/>
		<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'/>
    </h:head>
    
    <h:body>
    
          <style>
			.ui-accordion .ui-accordion-header .ui-icon {
			    margin-top: -8px;
			    position: absolute;
			    right: 0.5em;
			    top: 50%;
			}
            .ui-listview > .ui-li-static, .ui-listview > li p{
            	white-space: normal;
            }
          
          </style>
          
        
            <pm:page id="hotelsListId">
            	<pm:content>
                <h:form id="main">
                  <div class="row headerRow">
          			<div class="col-xs-2">
          				<a href="#panel-1" data-role="button" data-icon="bars" data-iconpos="notext" data-inline="true"></a>
						<div data-role="panel" id="panel-1" data-display="overlay">
							<ul data-role="listview" id="listview-1">
							    <li><a href="index.xhtml">Home</a></li>
								<li><a href="item2.html">Deals</a></li>
								<li><a href="item2.html">Recently viewed Hotels</a></li>
								<li><a href="item2.html">Recently viewed Deals</a></li>
								<li><a href="item3.html">Recent searches</a></li>
				                <li><a href="about.xhtml">About</a></li>
				                <c:if test="${signInUserView.userLoggedIn}">
									<li><a href="#{request.contextPath}/user/userDetails.xhtml">Profile</a></li>
									<li><a href="#{request.contextPath}/user/changePassword.xhtml">Change Password</a></li>
				                    <li><h:commandLink action="#{signInUserView.logout()}" value="Longout" /></li>
							    </c:if>	
							</ul>
						</div>
          			</div>
					<div class="col-xs-3">
					    <p:commandLink action="/index.xhtml?faces-redirect=true">
						   <h3>Hotellie</h3>
						</p:commandLink>
					</div>
					<div class="col-xs-7">
						<p:link styleClass="fa fa-sort" outcome="pm:sortPage?transition=flip"/>
						<p:link styleClass="fa fa-filter" outcome="pm:filterPage?transition=flip"/>
						<p:link styleClass="fa fa-search" outcome="pm:search?transition=flip"/>
						
					</div>
          		  </div>
          		  <p:dataList value="#{searchView.hotels}" var="hotel">
		                  <div class="row searchRow">
		                    	<div class="col-xs-12">
								<div class="thumbnail right-caption col-xs-12">
									<div class="col-xs-5">
										<img class="col-xs-12" src="#{hotel.hotel.hotelImage.filePath}" alt="..."/>
										<div class="star">
											<h:outputLabel value="#{searchView.getStar(hotel.hotel.starRating)}" escape="false"/>
										</div>
										
										<h:panelGrid rendered="#{hotel.hotel.hasDeal}">
									    	<h3 class="deal">Hot Deal</h3>
									    </h:panelGrid>	
									</div>
									<div class="col-xs-7">
										<h3 title="#{hotel.hotel.name}--#{searchView.currentMilliSecd}">#{hotel.hotel.name}--#{searchView.currentMilliSecd}</h3>
										<div class="col-xs-7">
											<div style="margin-top: .5em;" class="iconRow row">
												<a>
													<i class="fa fa-thumbs-up"></i>
													<p>46</p>
												</a>
												<a>
													<i class="fa fa-thumbs-down"></i>
													<p>10</p>
												</a>
												<a>
													<i class="fa fa-info-circle"></i>
													<p>info</p>
												</a>
											</div>
											<div class="facilities row">
												<i class="fa fa-car"></i>
												<i class="fa fa-wifi"></i>
												<i class="fa fa-cutlery"></i>
												<i class="fa fa-plus-square"></i>
											</div>
											<p:outputPanel rendered="#{hotel.hasDeal()}">
												<span class="del">
													<h3>$#{hotel.liveDealData.originalPrice}</h3>
												</span>
												After #{hotel.liveDealData.afterDiscount}%<h2 class="cost">$#{hotel.liveDealData.currentPrice}</h2>
											</p:outputPanel>
											
											<p:outputLabel value="$#{hotel.hotel.price}" rendered="#{not hotel.hasDeal()}"></p:outputLabel>
										</div>
										<p:outputPanel rendered="#{hotel.hasDeal()}">
											<div class="col-xs-5 priceClmn">
												<p>#{hotel.personCount} more to get</p>
												<span class="pricetagSqr"><h3>#{hotel.percentOff}%<p style="color: #fff;">OFF</p></h3></span>
												<p:commandLink value="Buy" actionListener="#{searchView.gotoViewDeal(hotel.hotel)}" update=":dealView" oncomplete="PrimeFaces.Mobile.navigate('#dealView',{transition:'flip'});" styleClass="btn btn-success"/>
											</div>
										</p:outputPanel>
									</div>
								</div>
							</div>
		                  </div>
                  </p:dataList>                    
                  </h:form>
             	</pm:content>
            </pm:page>
            
            
             <pm:page id="search">
		           <pm:header title="Search" swatch="b" styleClass="hmsHeader">
		                <p:button outcome="pm:hotelsListId?transition=flip" value="Back" styleClass="ui-btn-left ui-btn-inline"/>
		           </pm:header>
	             <pm:content>
	              <p:inputText id="search" value="#{searchView.searchBean.placeBean.placeName}" type="search" placeholder="Enter destination"/> 
	                    
	                    <h:panelGrid columns="2" styleClass="dateHms">
	                      <p:panel header="Check-in Date">
	                  	     <p:calendar pattern="MM/dd/yyyy"/>
	                  	  </p:panel>
	                  	  <p:panel header="Check-out Date">
	                  	      <p:calendar pattern="MM/dd/yyyy"/>
	                  	  </p:panel>    
	                    </h:panelGrid>
	                    
	                    <p:commandButton value="Search" icon="search" actionListener="#{searchView.search}"  outcome="pm:first?transition=flip"/>
                    </pm:content>
            </pm:page>
            
             <pm:page id="sortPage">
             
	           <pm:header id="sortHead" title="Sort" swatch="b" styleClass="hmsHeader">
	                <p:button id="sortButtonResult" outcome="pm:hotelsListId?transition=flip" value="back" styleClass="ui-btn-left ui-btn-inline"/>
	           </pm:header>
	           <pm:content>
	             <h:form>
	               <p:selectOneRadio id="sortRadio" value="#{searchView.searchBean.hotelSorting}">
							<f:selectItem itemLabel="Popularity" itemValue="POPULARITY" />
							<f:selectItem itemLabel="Price(low to high)" itemValue="PRICE_LOW_TO_HIGH" />
							<f:selectItem itemLabel="Star(5 to 0)" itemValue="STAR_FIVE_ZERO" />
							<f:selectItem itemLabel="Star(0 to 5)" itemValue="STAR_ZERO_TO_FIVE" />
							<f:selectItem itemLabel="Distance" itemValue="DISTANCE" />
							<f:selectItem itemLabel="Review score" itemValue="REVIEW_SCORE" />
							<f:selectItem itemLabel="Name(A-Z)" itemValue="NAME_A_TO_Z" />
							<p:ajax update=":hotelsListId" listener="#{searchView.search()}" event="change"/>
					</p:selectOneRadio>
				 </h:form>	
                </pm:content>
            </pm:page>
            
            <pm:page id="filterPage">
	           <pm:header title="Filters" swatch="b" styleClass="hmsHeader">
	                <p:button outcome="pm:hotelsListId?transition=flip"  value="Back" styleClass="ui-btn-left ui-btn-inline"/>
	           </pm:header>
               <pm:content>
	           <p:selectBooleanCheckbox id="selectBooleanCheckbox" itemLabel="Only Deal" value="#{searchView.searchBean.filterBean.dealOnly}">
	                <p:ajax update=":hotelsListId" listener="#{searchView.search()}" event="change"/>
	           </p:selectBooleanCheckbox>
               <p:accordionPanel id="filterIdnavi">
				    <p:tab title="Star Rating">
				       <h:panelGrid style="hight:200px">
				        <h:form>
							<p:rating value="#{searchView.searchBean.filterBean.starRating}" stars="5" onRate="#{searchView.search()}" >	
							  	 <p:ajax update=":hotelsListId" listener="#{searchView.search()}" event="rate" />
							</p:rating>
						</h:form>
					   </h:panelGrid>				  
                   </p:tab>
				    <p:tab title="Hotel Size">
				    		<h:form>
				            <p:selectOneRadio id="selectOneRadio" value="#{searchView.searchBean.filterBean.hotelSize}">
						        <f:selectItem itemLabel="1-50" itemValue="FIFTY" />
						        <f:selectItem itemLabel="51-150" itemValue="FIFTY_ONE_FIFTY" />
						        <f:selectItem itemLabel="151+" itemValue="MORE_THAN_ONE_FIFTY" />
						        <p:ajax update=":hotelsListId" listener="#{searchView.search()}" event="change"/>
						    </p:selectOneRadio>
						    </h:form>
				    </p:tab>
				    <p:tab title="Facilities">
				         <h:form>
						 <p:selectManyCheckbox id="selectManyCheckbox" value="#{searchView.searchBean.filterBean.facilities}">
						        <f:selectItem itemLabel="Spa" itemValue="spa" />
						        <f:selectItem itemLabel="Wifi" itemValue="wifi" />
						        <f:selectItem itemLabel="Breakfast" itemValue="breakfast" />
						        <f:selectItem itemLabel="Pool" itemValue="pool" />
						        <f:selectItem itemLabel="Beach" itemValue="beach" />
						        <p:ajax update=":hotelsListId" listener="#{searchView.search()}" event="change"/>
						  </p:selectManyCheckbox>	
						  </h:form>
				    </p:tab>
				</p:accordionPanel>
				
			    <p:commandButton value="Reset Filter" icon="search" actionListener="#{searchView.init()}" update=":hotelsListId , filterIdnavi"/>
                </pm:content>
            </pm:page>
            
            <pm:page id="dealView" lazy="true">
               <pm:header title="#{dealView.dealData.deal.dealName}" swatch="b" styleClass="hmsHeader">
	                <p:button outcome="pm:hotelsListId?transition=flip"  value="Back" styleClass="ui-btn-left ui-btn-inline"/>
	           </pm:header>
	           
	             <pm:content>
            <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'/>
          
                
          		<h:form id="main">
                 <p:panel styleClass="noHeader hotelFullView">     
                    <p:outputPanel id="viewDealId" autoUpdate="true">
                      	    <p:commandLink value="Add to watch list" style="float:right">
                      	    </p:commandLink>
                      	    <div class="row">
                      	    	<div class="thumbnail right-caption col-xs-12 fullView">
                      	    		<div class="boxHeader">
                      	    			<h:outputLabel value="#{dealView.dealData.hotel.name}" styleClass="offer"/>
                      	    			<h:outputLabel value="#{dealView.dealData.noOfDaysLeft} days left" styleClass="daysLeft"/>
                      	    		</div>
                      	    		 <div class="row">
		                      	    	<div class="col-xs-6" style="padding:0">
	                      	    			<img class="col-xs-12" src="#{request.contextPath}/resources/image/h1.jpg" alt="..."/>
	                      	    		</div>
	                      	    		<div class="col-xs-6">
	                      	    			<p><b>#{dealView.dealData.availableForBooking}</b> Available/	
	                      	    			<p:commandLink  action="/deal/dealTransactions.xhtml?faces-redirect=true">                      	    			
	                      	    			    <b>#{dealView.dealData.alreadyBooked}</b> sold
	                      	    			</p:commandLink>
	                      	    			</p>
	                      	    			<div class="facilities row">
												<i class="fa fa-car"></i>
												<i class="fa fa-wifi"></i>
												<i class="fa fa-cutlery"></i>
												<i class="fa fa-plus-square"></i>
											</div>
	                      	    		</div>
		                      	    </div>
		                      	    <div class="row">
		                      	    	<h:outputLabel value="Offer Details:" />
		                      	    	<div class="col-xs-1"></div>
		                      	    	<div class="col-xs-9">
		                      	    	    <h:outputLabel value="#{dealView.liveDealCriterionsinHTML}" escape="false"/>
		                      	    	</div>
		                      	    </div>
		                      	    <div class="row">
		                      	    	<div class="col-xs-7 pull-right">
		                      	    		<h4 style="display:inline">Price:</h4>
		                      	    		<span class="del">
												<h3 style="display:inline">$#{dealView.dealData.originalPrice}</h3>
											</span>
											<div>
												<h4 style="display:inline">After #{dealView.dealData.afterDiscount}%:</h4>
												<h3 class="cost" style="display:inline">$#{dealView.dealData.currentPrice}</h3>/ROOM
											</div>
		                      	    	</div>
		                      	    </div>
		                      	    <div class="row">
		                      	    	<div class="col-xs-8">
		                      	    		<pm:field>
		                      	    			<p:outputLabel for="numRooms" value="No of Rooms" style="width: 50%;float: left;"/>
										        <p:selectOneMenu id="numRooms" value="#{dealView.dealData.noOfRooms}">
										             <f:selectItems value="#{dealView.availableRooms}" />  
										             <p:ajax update="main" listener="#{dealView.fireNoOfRoomChangedAction()}"></p:ajax>
										        </p:selectOneMenu>
		                      	    		</pm:field>
		                      	    	</div>
		                      	    	<div class="col-xs-4" style="padding:0">
		                      	    		<p:commandLink value="Buy" styleClass="btn btn-success" disabled="#{not searchView.dealView.buyButtonEnabled}"  action="#{searchView.buyAction()}" ajax="false" style="margin: 0.5em;padding: .9em 1.5em;"/>
		                      	    	</div>
		                      	    </div>
		                      	       <div class="row">
		                      	         <div style="margin-left:15px">
		                      	            Total Cost - $ #{searchView.dealView.dealData.totalCost} for #{searchView.dealView.dealData.totalDays} nights
		                      	         </div>
		                      	       </div>
                      	    	</div>
                      	    </div>
                     </p:outputPanel> 
                  </p:panel>
                </h:form>
            </pm:content>
            
           </pm:page>
    </h:body>
    
</html>